<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
onLaunch(() => {
  uni.$emit("HOME_RENDERED");
  console.log("App Launch ");
});
onShow(() => {
  console.log("App Show");
});
onHide(() => {
  console.log("App Hide");
});
</script>
<style lang="scss">
@font-face {
  font-family: 'iconfont';
  src: url('static/fonts/icon.ttf') format('truetype');
}

page {
  background-color: $border-color;
}

.iconfont {
  font-family: 'iconfont';
  font-size: 24rpx;
  color: $text-color;
}

.btn-opacity:active {
  opacity: 0.7;
  transition: .3s;
}

.ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hover-class-opacity {
  opacity: 0.7;
  transition: .2s;
}

.hover-class {
  background-color: #f1f1f1;
}

.hover-class-opacity {
  opacity: 0.7;
}

.statusbar {
  height: var(--status-bar-height);
}

.theme-background {
  /* #ifdef APP */
  background: $theme-background;
  /*  #endif  */
  /* #ifndef APP */
  background: $primary-color;
  /*  #endif  */
}

.link-btn {
  color: $text-color;
  font-size: 28rpx;
  display: inline-block;

  &:active {
    opacity: 0.7;
  }

  &.link-delete {
    color: $amount-color;
  }

  &.link-primary {
    color: $primary-color;
  }
}

// 自定义按钮样式
.custom-button {
  display: inline-flex;
  width: 246rpx;
  height: 88rpx;
  margin: 0;
  padding: 0;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  border: 1px solid $border-color;
  font-size: 28rpx;
  transition: .2s;

  &::after {
    display: none;
  }

  &.custom-button-primary {
    background-color: $primary-color;
    color: #fff;
  }

  &:active {
    opacity: 0.7;
  }
}

// 自定义tabbar头部
.custom-tabbar-header {
  height: 80rpx;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  /* #ifdef H5 */
  top: 44px;
  /* #endif */
  background-color: #fff;
  border-bottom: 1px solid $border-color;
  z-index: 5;
  display: flex;
  align-items: center;

  >view {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid transparent;
    font-size: 28rpx;

    &.actived {
      border-bottom-color: $primary-color;
      color: $primary-color;
    }
  }
}
</style>
